<template>
  <view class="inform">
      <!-- 通知 要固定-->
      <view class="inform-top">
        <!-- 通知 -->
        <view class="inform-top-text">
          <text>通知</text>
        </view>
        <!-- 客服 -->
        <view class="cons">
          <view class="con">
            <uni-icons custom-prefix="iconfont" type="icon-kefu" size="20"></uni-icons>
            <text>客服</text>
          </view>
          <view class="con">
            <uni-icons type="gear" size="20"></uni-icons>
            <text>设置</text>
          </view>
        </view>
      </view>
      <!-- 下方图标 -->
      <view class="inform-bottom">    
        <view class="inform-bottom-top"> 
          <block v-for="(item,i) in icons" :key="i">
            <view class="item" v-if="i==1 || i== 2">
              <uni-badge  :text="i == 1?myMessage:myInform" absolute="rightTop" size="small" class="x">
                <view class="icon" :style="{backgroundColor:item.color,}">
                  <uni-icons custom-prefix="iconfont" color="white" :type="item.icon" size="20"></uni-icons>
                </view>
              </uni-badge>
              <text>{{item.text}}</text>
            </view>
            <view class="item" @click="toBills(i)"  v-else>
              <view class="icon" :style="{backgroundColor:item.color,}">
                <uni-icons custom-prefix="iconfont" color="white" :type="item.icon" size="20"></uni-icons>
              </view> 
              <text>{{item.text}}</text>
            </view>
          </block>
        </view>
        <view class="inform-bottom-btm">
          <view class="left">
            <view class="icons" @click="c">
              <uni-icons type="star-filled" size="30" color="#ff9900"></uni-icons>
            </view>
          </view>
          <view class="right">
            <text class="right1">消息号动态</text>
            <text>分期付款:</text>
          </view>
        </view>
      </view>
  </view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
  import tabbarBadge from '@/mixins/tabbar-badge.js'
  export default {
    mixins:[tabbarBadge],
    data() {
      return {
        icons: [
          {
            color: '#FF33FF',
            text: '订单出行',
            icon: 'icon-dingdandingdanmingxishouzhimingxi'
          },
          {
            color: '#1296db',
            text: '互动消息',
            icon: 'icon-xiaoxi-xiaoxi'
          },
          {
            color: '#cc6600',
            text: '账户通知',
            icon:'icon-tongzhifill'
          },
          {
            color: '#006600',
            text: '会员服务',
            icon: 'icon-huiyuan1'
          }
        ],
      };
    }
    ,
    
    methods: {
      ...mapMutations('m_user',['updateUserInfo']),
      c () {
        let info = null
        info = {
          name: '罗慧',
          avator: 'https://img1.baidu.com/it/u=3387271979,2426406564&fm=253&fmt=auto&app=138&f=JPEG',
          myMessage: 3,
          myInform: 8,
          sex : true,
          IP:'甘肃'
        },
        this.updateUserInfo(info)
      },
      toBills(i) {
        if(i == 0) {
          console.log('去bill页面')
          if(!this.userInfo){
            uni.$showMsg('请先登录')
            uni.navigateTo({
              url:'/subpkg/login/login'
            })
          }else{
            uni.navigateTo({
              url:'/subpkg/bill/bill'
            })
          }
        }
      }
    },
    computed: {
      ...mapState('m_user',['userInfo']),
      myMessage() {
        return this.userInfo ? this.userInfo.myMessage:0
      },
      myInform() {
        return this.userInfo ? this.userInfo.myInform:0
      }
    }
  }
</script>

<style lang="scss">
@import "@/static/iconfont.css";
.inform {
  font-size: 13px;
  .inform-top {
    margin-bottom: 50rpx;
    display: flex;
    justify-content: space-between;
    padding-left: 350rpx;
    display: flex;
    .inform-top-text {
      font-size: 20px;
      font-weight: bold;
    }
    .cons {
      font-size: 10px;
      display: flex;
      justify-content: space-around;
      margin-right: 40rpx;
      .con {
        display: flex;
        flex-direction: column;
        margin: 0 10rpx;
      }
    }
  }
  .inform-bottom {
    margin: 0 60rpx;
    .inform-bottom-top {
      background-color: white;
      display: flex;
      justify-content: space-around;
      padding: 40rpx 0;
      margin-bottom: 40rpx;
      border-radius: 20px;
      .item {
        text-align: center;
        .x {
          width: 70rpx;
          display: flex;
          flex-direction: column;
          // background-color: #ffff66;
        }
        .icon {
          width: 70rpx;
          height: 70rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 45%;
        }
      }
    }
      
    .inform-bottom-btm {
      background-color: white;
      padding: 20rpx 40rpx;
      display: flex;
      justify-content: baseline;
      border-radius: 15px;
      .left {
        margin-right: 40rpx;
        .icons {
          width: 70rpx;
          height: 70rpx;
          background-color: #ffff66;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 45%;
        }
      }
      .right {
       font-size: 13px;
        display: flex;
        flex-direction: column;
        .right1 {
          margin-bottom: 10rpx;
        }
      }
    }
  }
}
</style>
